<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>博客-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<script src="js/jquery-1.11.3.js"></script>
<body>
    <div class="register_con">
        <div class="l_con fl">
            <a class="reg_logo"><img src="images/logo.png"></a>
            <div class="reg_slogan">欢迎注册博客</div>
            <div class="reg_banner"></div>
        </div>

        <div class="r_con fr">
            <div class="reg_title clearfix">
                <h1>用户注册</h1>
                <a href="login.html" target="_blank" onclick="login()">登录</a>
            </div>
            <div class="reg_form clearfix" id="app" v-cloak>
                <form id="reg_form" @submit.prevent="on_submit">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" v-model="username" @blur="check_username" name="user_name" id="username">
                        <span v-show="error_name" class="error_tip">{{ error_name_message }}</span>
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" v-model="password" @blur="check_pwd" name="pwd" id="password_1">
                        <span v-show="error_password" class="error_tip">密码最少8位，最长20位</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="password_2">
                        <span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span>
                    </li>

					<li>
            <input type="phone" class="phone" name="phone" placeholder="请输手机号" required/>
						 <input type="button" id="sms" onclick="sendSMS();settime(this)" value="免费获取验证码">
						<div class="clear"> </div>
					</li>
					<li>
            <input type="sms_num" class="sms_num" name="sms_num" placeholder="请输入验证码" required />
						<div class="clear"> </div>
                            </li>

                    <li class="reg_sub">
                        <input type="submit" value="注 册" name="" onclick="register()">
                    </li>
                </ul>
                </form>
            </div>

        </div>

    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京开源商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    <script type="text/javascript" src="js/register.js"></script>
</body>

<script>


	var countdown=60;
	function settime(obj) {
    	if (countdown == 0) {
        	obj.removeAttribute("disabled");
        	obj.value="免费获取验证码";
			countdown = 60;
        	return;
    	} else {
        	obj.setAttribute("disabled", true);
        	obj.value="重新发送(" + countdown + ")";
        	countdown--;
    	}
		setTimeout(function() {
    		settime(obj) }
    	,1000)
	}
	function register(){
	// 1 获取用户输入
	var username = $('#username').val();
	var password_1 = $('#password_1').val();
	var password_2 = $('#password_2').val();
	var phone = $('.phone').val();
	var sms_num=$('.sms_num').val()
	// 2 封装成json
	var post_data={'username':username,
					'password_1':password_1,
					'password_2':password_2,
					'phone':phone,
					'sms_num':sms_num,};
					console.log(post_data);
	// 3 向后端发送ajax请求
	$.ajax({
		url:'http://127.0.0.1:8000/v1/users',
		type:'post',
		data:JSON.stringify(post_data),
		contentType:'appliction/json',
		dataType:'json',
		//res={'code':200}
		success:function(res){
			if (res.code==200){
				alert('注册成功');

			}else{
				alert(res.error)
			}
		}
	})

	}

	function sendSMS(){
		var phone=$('.phone').val();
		var post_data={'phone':phone};
		console.log('11111111111');
		$.ajax({
			url:'http://127.0.0.1:8000/v1/users/sms',
			type:'post',
			data:JSON.stringify(post_data),
			contentType:'application/json',
			dataType:'json',
			success:function(res){
				if(res.code==200){
					alert('短信验证已发送，请注意查收！');
				}else{
					alert(res.error);
				}
			}
		})
	}

    </script>
</html>